<script setup lang="ts">
	//
	import Navbar from "./components/customNavbar.vue"
	import Banner from "./components/Banner.vue"
	import Category from "./components/category.vue"
	import Hotpannel from "./components/Hotpannel.vue"
	import XtxGuess from "../../components/XtxGuess.vue"
	import { ref } from "vue";
	import type { XtxGuessInstance } from "@/types/components"
	import type { BannerItem, CategoryItem, HotItem } from "@/types/home";
	import { getHomeBannerAPI, getCategoryApi, hotApi } from "@/services/home";
	import { onLoad } from "@dcloudio/uni-app";
	const BannerList = ref<BannerItem[]>([]);
	const CatList = ref<CategoryItem[]>([]);
	const HotList = ref<HotItem[]>([]);
	const guessRef = ref<XtxGuessInstance>();
	const getHomeBannerdata = async () => {
		const res = await getHomeBannerAPI();
		BannerList.value = res.result;
		console.log(BannerList.value)
	}
	const getCategorydata = async () => {
		const res = await getCategoryApi();
		console.log(res)
		CatList.value = res.result
	}
	const getHotdata = async () => {
		const res = await hotApi();
		console.log(res)
		HotList.value = res.result
	}
	const onscroll = () => {
		console.log(1)
		guessRef.value?.getMore();
	}
	const istrigger = ref(false)
	const onrefresh = async () => {
		console.log(2)
		istrigger.value = true
		guessRef.value?.resetData()
		await Promise.all([getHomeBannerdata(), getCategorydata(), getHotdata()])
		istrigger.value = false

	}
	onLoad(async () => {
		await Promise.all([getHomeBannerdata(), getCategorydata(), getHotdata()])
	})
</script>

<template>
	<view class="index">
		<scroll-view scroll-y refresher-enabled @refresherrefresh="onrefresh" :refresher-triggered="istrigger"
			style="height: 100vh;" @scrolltolower="onscroll">
			<Navbar />
			<Banner :list="BannerList" />
			<Category :list="CatList" />
			<Hotpannel :list="HotList" />

			<XtxGuess ref="guessRef" />
		</scroll-view>

	</view>
</template>

<style lang="scss">
	//
</style>